<template>
	<view>
		<view class="tabs">
			<view class="tabs-item flex--aj-center" v-for="(item,index) in tabsList" :key="index"
				@click="tabClick(item,index)">
				<view class="item-content flex--aj-center"
					:class="{'item-content-no': index !== tabCurrent,'item-content-active': index === tabCurrent}">
					{{item.text}}
					<view class="item-img" v-if="index === tabCurrent">
						<image src="../../../../static/icon/order_tab.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="order" v-if="list.length > 0">
			<view class="order-item" v-for="(item,index) in list" :key="index">
				<view class="item-header flex--justify-between">
					<view class="header-left">
						订单号:{{item.order_no}}
					</view>
					<view class="header-right">
						<!-- 59:49 -->
						<text>{{ item.order_status_text }}</text>
					</view>
				</view>
				<view class="item-content">
					<view class="item-product flex--align-start" v-for="(pitem,pindex) in item.products" :key="index">
						<view class="product-left">
							<image :src="pitem.spec_image" mode="scaleToFill"></image>
						</view>
						<view class="product-right">
							<view class="">
								<view class="name">
									{{ pitem.product_name }}
								</view>
								<view class="spec" v-if="pitem.spec_type === '20'">
									{{ pitem.product_attr }}
								</view>
							</view>
							<view class="price">
								￥{{ pitem.product_price }}
							</view>
						</view>
					</view>

					<view class="item-info">
						<view class="info-content">
							<view class="info-header">
								预约拍摄信息
							</view>
							<view class="info-order">
								拍摄门店：<text>{{ item.store_name }}</text>
							</view>
							<view class="info-order m-t-16">
								预约时间：<text>{{ item.reservation_time_text }}</text>
							</view>
							<view class="info-order m-t-16" v-if="item.order_deposit > 0">
								押金：<text>￥{{ item.order_deposit }}</text>
							</view>
							<!-- <view class="info-order m-t-16">
								发票服务：<text>暂未开具发票</text>
							</view> -->
						</view>
					</view>

					<view class="item-price">
						<view class="coupon-money" v-if="item.coupon_money > 0">
							优惠金额：<text>￥{{ item.coupon_money }}</text>
						</view>
						<view>
							实付款：<text>￥{{ item.pay_price }}</text>
						</view>
					</view>

					<view class="item-btns">
						<view class="item-btn flex--aj-center item-btn-white" @click="cancelOrder(item,index)"
							v-if="item.order_status == 10">
							取消订单
						</view>

						<view class="item-btn flex--aj-center item-btn-black" @click="payOrder(item,index)"
							v-if="item.order_status == 10">
							去付款
						</view>

						<view class="item-btn flex--aj-center item-btn-white" @click="refundOrder(item,index)"
							v-if="item.order_status == 30">
							申请退款
						</view>

						<view class="item-btn flex--aj-center item-btn-black" @click="imageOrder(item)"
							v-if="item.order_status > 20">
							图片下载
						</view>

						<!-- <view class="item-btn flex--aj-center item-btn-black" @click="completeOrder(item,index)"
							v-if="item.order_status == 30 || item.order_status == 40">
							完成订单
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="empty" v-if="show">
				<view class="">
					<!-- <image :src="" mode="widthFix"></image> -->
					<image src="../../../../static/icon/mall_order.png" mode=""></image>
				</view>
				<view class="empty-text">
					您还没有订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrent: 0,
				tabsList: [{
						text: '全部',
						status: 0
					},
					{
						text: '待拍摄',
						status: 30
					},
					{
						text: '进行中',
						status: 40
					},
					{
						text: '已完成',
						status: 50
					},
					{
						text: '已关闭',
						status: 20
					}
				],
				list: [],
				page: 1,
				pageSize: 10,
				last_page: 1,
				show: false
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			let _this = this;
			// 已经是最后一页
			if (_this.page >= _this.last_page) {
				return false;
			}

			_this.page++

			_this.getList()
		},
		methods: {
			tabClick(item, index) {
				let _this = this
				if (_this.tabCurrent == index) {
					return false
				}

				_this.tabCurrent = index
				_this.page = 1
				_this.last_page = 1
				_this.list = []
				_this.show = false
				_this.getList()
			},
			getList() {
				let _this = this
				_this.$api.get('meet.order/index', {
					page: _this.page,
					page_size: _this.pageSize,
					status: _this.tabsList[_this.tabCurrent].status
				}).then(res => {
					_this.show = true
					if (res.code == 1) {
						let list = _this.list.concat(res.data.data)

						_this.list = list

						_this.last_page = res.data.last_page
					} else {
						_this.toast(res.msg)
					}
				}, fail => {})
			},
			cancelOrder(item, index) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('meet.order/cancel', {
								order_id: item.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									let list = _this.list

									list[index].order_status = 20
									list[index].order_status_text = '已关闭'
									// list.splice(index, 1)

									_this.list = list
								} else {
									_this.toast(res.msg)
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// completeOrder(item, index) {
			// 	let _this = this
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '确定完成订单吗？',
			// 		showCancel: true,
			// 		cancelText: '取消',
			// 		confirmText: '确认',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				uni.showLoading({
			// 					title: '提交中...',
			// 					mask: true
			// 				})
			// 				_this.$api.post('meet.order/complete', {
			// 					order_id: item.id
			// 				}).then(res => {
			// 					uni.hideLoading()
			// 					_this.toast(res.msg)
			// 					if (res.code == 1) {
			// 						let list = _this.list

			// 						if (_this.tabsList[_this.tabCurrent].status != 0) {
			// 							list.splice(index, 1)
			// 						} else {
			// 							list[index].order_status = 50
			// 							list[index].order_status_text = '已完成'
			// 						}

			// 						_this.list = list
			// 					} else {
			// 						_this.toast(res.msg)
			// 					}
			// 				}, fail => {})
			// 			}
			// 		},
			// 		fail: () => {},
			// 		complete: () => {}
			// 	});
			// },
			refundOrder(item, index) {
				let _this = this
				let msg = ''

				if (item.refund_handle_fee > 0) {
					msg = `退款将收取${item.refund_handle_fee}%的手续费，确定要退款吗？`
				} else {
					msg = '确定要退款吗？'
				}

				uni.showModal({
					title: '提示',
					content: msg,
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('meet.order/refund', {
								order_id: item.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									let list = _this.list

									if (_this.tabsList[_this.tabCurrent].status != 0) {
										list.splice(index, 1)
									} else {
										list[index].pay_status = 30
										list[index].order_status = 20
										list[index].order_status_text = '已关闭'
									}

									_this.list = list
								} else {
									_this.toast(res.msg)
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			payOrder(item, index) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定付款吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							_this.pay(item, index)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			pay(item, index) {
				let _this = this

				uni.showLoading({
					title: '支付中...'
				})

				_this.$api.post('meet.order/pay', {
					order_id: item.id
				}).then(res => {
					if (res.code == 1) {
						if (res.data.status == 1) { //已成功，跳转订单页面
							uni.showModal({
								title: '提示',
								content: '支付成功',
								showCancel: false,
								cancelText: '',
								confirmText: '确认',
								success: res => {
									let list = _this.list

									list[index].order_status = 30
									list[index].order_status_text = '待拍摄'

									_this.list = list
								},
								fail: () => {},
								complete: () => {}
							})
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: res.data.config.nonceStr, // 随机字符串
								package: res.data.config.package, // 固定值
								timeStamp: res.data.config.timeStamp, // 时间戳（单位：秒）
								signType: res.data.config.signType,
								paySign: res.data.config.paySign, // 签名，这里用的 MD5/RSA 签名
								success: res => {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										cancelText: '',
										confirmText: '确认',
										success: res => {
											let list = _this.list

											list[index].order_status = 30
											list[index].order_status_text = '待拍摄'

											_this.list = list
										},
										fail: () => {},
										complete: () => {}
									})
								},
								fail: (res) => {
									_this.toast('支付失败')
								},
								complete: () => {}
							});
						}
					} else {
						uni.hideLoading()
						_this.toast(res.msg)
					}
				}, fail => {})
			},
			imageOrder(item) {
				uni.navigateTo({
					url: '/pages/user/reservation/order/images?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 80rpx;
	}

	.flex--aj-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex--justify-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex--align-start {
		display: flex;
		align-items: start;
	}

	.m-t-16 {
		margin-top: 16rpx;
	}

	.tabs {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		.tabs-item {
			width: 20%;

			.item-content {
				width: 120rpx;
				height: 92rpx;
				position: relative;

				.item-img {
					position: absolute;
					top: 20%;
					left: 0;
					width: 120rpx;
					height: 65rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.item-content-no {
				font-weight: 400;
				font-size: 32rpx;
				color: #8A8A8A;
			}

			.item-content-active {
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}
		}
	}

	.order {
		width: 100%;

		.order-item {
			margin-top: 40rpx;
			background-color: #FFFFFF;

			.item-header {
				padding: 28rpx 40rpx;
				border-bottom: 2rpx solid #F0F0F0;

				.header-left {
					font-weight: 800;
					font-size: 32rpx;
					color: #010101;
				}

				.header-right {
					font-weight: 400;
					font-size: 28rpx;
					color: #E1135B;

					text {
						margin-left: 10rpx;
					}
				}
			}

			.item-content {
				padding: 38rpx 40rpx;

				.item-product {
					margin-bottom: 36rpx;

					.product-left {
						width: 179rpx;
						height: 179rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.product-right {
						width: 80%;
						margin-left: 32rpx;
						height: 179rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-weight: 800;
							font-size: 32rpx;
							color: #000000;
						}

						.spec {
							font-weight: 400;
							font-size: 28rpx;
							color: #8A8A8A;
							margin-top: 8rpx;
						}

						.price {
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;
						}
					}
				}

				.item-info {
					margin-top: 36rpx;

					.info-content {
						background: #F7F7F7;
						padding: 22rpx 24rpx;

						.info-header {
							font-weight: 800;
							font-size: 28rpx;
							color: #000000;
							margin-bottom: 20rpx;
						}

						.info-order {
							font-size: 24rpx;
							color: #000000;

							text {
								color: #8A8A8A;
							}
						}
					}
				}

				.item-price {
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: flex-end;
					flex-direction: column;
					margin-top: 32rpx;
					padding-bottom: 36rpx;
					border-bottom: 2rpx solid #F0F0F0;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;

					text {
						font-size: 32rpx;
						color: #F73830;
					}

					.coupon-money {
						font-size: 24rpx;
						margin-bottom: 10rpx;

						text {
							font-size: 28rpx;
						}
					}
				}

				.item-btns {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 38rpx;

					.item-btn {
						width: 152rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #000000;
						font-size: 24rpx;
						font-weight: 800;
						margin-left: 18rpx;
					}

					.item-btn-white {
						background-color: #FFFFFF;
					}

					.item-btn-black {
						background: #000000;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.empty {
		width: 100%;
		text-align: center;
		margin-top: 20%;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #999999;
			margin-top: 80rpx;
		}
	}
</style>